<template>
  <div class="popup">
    <div class="main">
      <div class="main-header">
        <p>添加红人</p>
        <i class="iconfont icon-guanbi" @click="close"></i>
      </div>
      <div class="main-content">
        <div class="tabs flex">
          <p v-for="(item, index) in tabList" :key="index" class="pointer font-14" :class="{ active: item === form.tab }"
            @click="tabChange(item)">
            {{ item }}</p>
        </div>
        <div v-if="form.tab !== '自主导入添加'" class="search">
          <div class="search-box flex flex-align-items-center">
            <div class="platform-list flex">
              <div v-for="(item, index) in platformList" :key="index" class="flex-center flex-align-items-center pointer"
                :class="{ active: form.platformIndex === index }" @click="platformChange(index)">
                <img :src="item.icon">
              </div>
            </div>
            <el-select v-if="form.tab === '收藏夹添加'" v-model="form.collect" style="width: 400px;">
              <option v-for="item in followPersonList" :key="item.id" :label="item.name" :value="item.id"></option>
            </el-select>
            <template v-if="form.tab === '搜索添加'">
              <el-popover placement="bottom-start" :width="348" trigger="click">
                <template #reference>
                  <div class="search-field flex-center flex-align-items-center pointer">
                    <p class="font-14">{{ fieldList[form.fieldIndex].name }}</p>
                    <i class="iconfont icon-jiantou_zuoyouqiehuan"></i>
                  </div>
                </template>
                <div class="search-field-popup flex">
                  <div v-for="(item, index) in fieldList" :key="index"
                    class="search-field-item flex-center flex-column flex-align-items-center pointer"
                    :class="{ active: form.fieldIndex === index }" @click="fieldChange(index)">
                    <img :src="item.icon">
                    <p class="font-12">{{ item.name }}</p>
                  </div>
                </div>
              </el-popover>
              <p class="line"></p>
              <el-input v-if="form.fieldIndex === 0" v-model="form.keyword"
                :placeholder="fieldList[form.fieldIndex].placeholder" maxlength="200"
                style="width: 467px;height: 44px;" />
              <el-input v-else-if="form.fieldIndex === 1" v-model="form.name"
                :placeholder="fieldList[form.fieldIndex].placeholder" maxlength="200"
                style="width: 467px;height: 44px;" />
              <el-input v-else-if="form.fieldIndex === 2" v-model="form.link"
                :placeholder="fieldList[form.fieldIndex].placeholder" maxlength="200"
                style="width: 467px;height: 44px;" />
              <el-popover placement="bottom" :width="104" trigger="hover">
                <template #reference>
                  <div class="save-record-btn flex-center flex-align-items-center pointer"
                    @click="searchCriteriaSavedChange">
                    <i class="iconfont icon-baocun"></i>
                  </div>
                </template>
                <div class="save-record-explain font-12">
                  保存的搜索条件
                </div>
              </el-popover>
              <div class="search-btn flex-center flex-align-items-center pointer">
                <i class="iconfont icon-sousuo"></i>
                <span class="font-16-M">搜索</span>
              </div>
            </template>
          </div>
        </div>
        <div class="condition flex-between">
          <div class="select-btns flex">
            <el-popover v-if="form.tab === '自主导入添加'" placement="bottom-start" :width="118" trigger="click"
              :show-arrow="false" @show="selectShowChange('platform', true)" @hide="selectShowChange('platform', false)">
              <template #reference>
                <div class="select-btn flex-between flex-align-items-center pointer"
                  :class="{ selected: form.platform > 0, active: selectShow.platformShow }">
                  <span class="font-14">{{ form.platform > 0 ? data.platformList.find(item => item.value ===
                    form.platform).name
                    : '平台' }}</span>
                  <i class="iconfont icon-xiajiantou"></i>
                </div>
              </template>
              <radio-popup :list="data.platformList" :checked="form.platform"
                @change="e => selectChange(e, 'platform')"></radio-popup>
            </el-popover>
            <el-popover v-if="form.tab !== '自主导入添加'" placement="bottom-start" :width="841" trigger="click"
              :show-arrow="false" @show="selectShowChange('catesShow', true)"
              @hide="selectShowChange('catesShow', false)">
              <template #reference>
                <div class="select-btn flex-between flex-align-items-center pointer"
                  :class="{ selected: form.cates.length > 0, active: selectShow.catesShow }">
                  <span class="font-14">分类{{ form.cates.length > 0 ? `(${form.cates.length})` : '' }}</span>
                  <i class="iconfont icon-xiajiantou"></i>
                </div>
              </template>
              <checkbox-popup :list="cateList" :checked="form.cates"
                @change="e => selectChange(e, 'cates')"></checkbox-popup>
            </el-popover>
            <el-popover placement="bottom-start" :width="841" trigger="click" :show-arrow="false"
              @show="selectShowChange('areasShow', true)" @hide="selectShowChange('areasShow', false)">
              <template #reference>
                <div class="select-btn flex-between flex-align-items-center pointer"
                  :class="{ selected: form.areas.length > 0, active: selectShow.areasShow }">
                  <span class="font-14">国家{{ form.areas.length > 0 ? `(${form.areas.length})` : '' }}</span>
                  <i class="iconfont icon-xiajiantou"></i>
                </div>
              </template>
              <checkbox-popup :list="countryList" :checked="form.areas"
                @change="e => selectChange(e, 'areas')"></checkbox-popup>
            </el-popover>
            <template v-if="form.tab === '搜索添加'">
              <el-popover placement="bottom" :width="194" trigger="click" :show-arrow="false"
                @show="selectShowChange('fansShow', true)" @hide="selectShowChange('fansShow', false)">
                <template #reference>
                  <div class="select-btn flex-between flex-align-items-center pointer"
                    :class="{ selected: form.fans !== -1, active: selectShow.fansShow }">
                    <span class="font-14">{{ form.fans === -1 ? '粉丝量' : form.fans.toString().split('-').length >
                      1 ?
                      form.fans : `${form.fans}以上` }}</span>
                    <i class="iconfont icon-xiajiantou"></i>
                  </div>
                </template>
                <radio-range-popup :list="data.fansList" :checked="form.fans" minPlaceholder="最小值" maxPlaceholder="最大值"
                  @change="e => selectChange(e, 'fans')"></radio-range-popup>
              </el-popover>
              <el-popover placement="bottom" :width="194" trigger="click" :show-arrow="false"
                @show="selectShowChange('averageViewsShow', true)" @hide="selectShowChange('averageViewsShow', false)">
                <template #reference>
                  <div class="select-btn flex-between flex-align-items-center pointer"
                    :class="{ selected: form.averageViews !== -1, active: selectShow.averageViewsShow }">
                    <span class="font-14">{{ form.averageViews === -1 ? '平均观看量' :
                      form.averageViews.toString().split('-').length > 1 ?
                        form.averageViews : `${form.averageViews}以上` }}</span>
                    <i class="iconfont icon-xiajiantou"></i>
                  </div>
                </template>
                <radio-range-popup :list="data.averageViews" :checked="form.averageViews" minPlaceholder="最小值"
                  maxPlaceholder="最大值" @change="e => selectChange(e, 'averageViews')"></radio-range-popup>
              </el-popover>
              <el-popover placement="bottom" :width="194" trigger="click" :show-arrow="false"
                @show="selectShowChange('averageInteractionRateShow', true)"
                @hide="selectShowChange('averageInteractionRateShow', false)">
                <template #reference>
                  <div class="select-btn flex-between flex-align-items-center pointer"
                    :class="{ selected: form.averageInteractionRate !== -1, active: selectShow.averageInteractionRateShow }">
                    <span class="font-14">{{ form.averageInteractionRate === -1 ? '平均互动率' :
                      form.averageInteractionRate.toString().split('-').length > 1 ?
                        `${form.averageInteractionRate.toString().split('-')[0]}%-${form.averageInteractionRate.toString().split('-')[1]}%`
                        : `${form.averageInteractionRate}%以上` }}</span>
                    <i class="iconfont icon-xiajiantou"></i>
                  </div>
                </template>
                <radio-range-popup :list="data.averageInteractionRate" :checked="form.averageInteractionRate"
                  minPlaceholder="最小值 %" maxPlaceholder="最大值 %"
                  @change="e => selectChange(e, 'averageInteractionRate')"></radio-range-popup>
              </el-popover>
              <el-popover placement="bottom" :width="118" trigger="click" :show-arrow="false"
                @show="selectShowChange('releaseTimeListShow', true)"
                @hide="selectShowChange('releaseTimeListShow', false)">
                <template #reference>
                  <div class="select-btn flex-between flex-align-items-center pointer"
                    :class="{ selected: form.releaseTimeList !== -1, active: selectShow.releaseTimeListShow }">
                    <span class="font-14">{{ form.releaseTimeList === -1 ? '最近发布' :
                      `${form.releaseTimeList}天内` }}</span>
                    <i class="iconfont icon-xiajiantou"></i>
                  </div>
                </template>
                <release-time-popup :list="data.releaseTimeList" :checked="form.releaseTimeList"
                  @change="e => selectChange(e, 'releaseTimeList')"></release-time-popup>
              </el-popover>
            </template>
            <el-popover v-if="form.tab === '自主导入添加'" placement="bottom-start" :width="162" trigger="click"
              :show-arrow="false" @show="selectShowChange('followPerson', true)"
              @hide="selectShowChange('followPerson', false)">
              <template #reference>
                <div class="select-btn flex-between flex-align-items-center pointer"
                  :class="{ selected: form.followPerson.length > 0, active: selectShow.followPersonShow }">
                  <span class="font-14">添加账号{{ form.followPerson.length > 0 ? `(${form.followPerson.length})` : ''
                  }}</span>
                  <i class="iconfont icon-xiajiantou"></i>
                </div>
              </template>
              <checkbox-popup1 :list="followPersonList" :checked="form.followPerson"
                @change="e => selectChange(e, 'followPerson')"></checkbox-popup1>
            </el-popover>
            <el-popover v-if="form.tab !== '搜索添加'" placement="bottom-start" :width="118" trigger="click"
              :show-arrow="false" @show="selectShowChange('email', true)" @hide="selectShowChange('email', false)">
              <template #reference>
                <div class="select-btn flex-between flex-align-items-center pointer"
                  :class="{ selected: form.email > 0, active: selectShow.emailShow }">
                  <span class="font-14">{{ form.email > 0 ? data.emailList.find(item => item.value === form.email).name
                    : '是否有邮箱' }}</span>
                  <i class="iconfont icon-xiajiantou"></i>
                </div>
              </template>
              <radio-popup :list="data.emailList" :checked="form.email"
                @change="e => selectChange(e, 'email')"></radio-popup>
            </el-popover>
          </div>
          <div class="condition-btns flex">
            <p v-if="form.tab === '搜索添加'" class="font-14 pointer">保存</p>
            <p class="font-14 pointer">清楚</p>
            <p class="font-14 pointer">确定</p>
          </div>
        </div>

        <div class="table">
          <el-table :data="searchList" :height="tableHeight" style="width: 100%;" class="table"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" fixed="left" />
            <el-table-column v-if="form.tab === '搜索添加'" label="全选" width="380" fixed="left">
              <template #default="scope">
                <div class="flex">
                  <div class="row-user pointer" @click="toDetail">
                    <img :src="scope.row.avatar">
                    <p class="font-18-M">{{ scope.row.score }}</p>
                  </div>
                  <div class="row-info">
                    <el-popover placement="top" trigger="hover">
                      <template #reference>
                        <div class="row-name flex flex-align-items-center pointer" @click="toDetail">
                          <p class="font-18-B">{{ scope.row.name }}</p>
                          <img v-if="scope.row.openEmail" src="@/assets/hasmail.svg">
                        </div>
                      </template>
                      <div class="row-info-explain">
                        <p class="font-12">{{ scope.row.name }}</p>
                        <p class="font-12">频道ID：{{ scope.row.channel }}</p>
                      </div>
                    </el-popover>
                    <div v-if="scope.row.tags.length > 0" class="item-tags flex">
                      <p v-for="(tag, tagIndex) in scope.row.tags.slice(0, 3)" :key="tagIndex" class="item-tag font-12">{{
                        tag
                      }}
                      </p>
                      <el-popover v-if="scope.row.tags.length > 3" width="250" placement="bottom" trigger="hover">
                        <template #reference>
                          <div class="row-tag-more flex-center flex-align-items-center">
                            <i class="iconfont icon-gengduo"></i>
                          </div>
                        </template>
                        <div class="row-all-tags flex flex-wrap">
                          <p v-for="(tag, tagIndex) in scope.row.tags.slice(0, 3)" :key="tagIndex" class="item-all-tag">{{
                            tag
                          }}
                          </p>
                        </div>
                      </el-popover>
                    </div>
                    <div class="row-location flex flex-align-items-center">
                      <i class="iconfont icon-weizhi"></i>
                      <p class="">{{ scope.row.location }}</p>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column v-if="form.tab === '搜索添加'" width="176">
              <template #default="scope">
                <div class="row-data">
                  <div class="flex-between">
                    <p class="font-14">粉丝量</p>
                    <p class="font-14">{{ numConvert(scope.row.fans, 2) }}</p>
                  </div>
                  <div class="flex-between">
                    <p class="font-14">平均观看量</p>
                    <p class="font-14">{{ numConvert(scope.row.averageViews, 2) }}</p>
                  </div>
                  <div class="flex-between">
                    <p class="font-14">平均互动率</p>
                    <p class="font-14">{{ scope.row.averageInteractionRate }}</p>
                  </div>
                  <div class="flex-between">
                    <p class="font-14">商业合作数</p>
                    <p class="font-14">{{ numConvert(scope.row.business, 2) }}</p>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column v-if="form.tab === '搜索添加'" prop="fans" width="516">
              <template #default="scope">
                <div class="row-files flex">
                  <div v-for="(pro, proIndex) in scope.row.proList.slice(0, 3)" :key="proIndex" class="row-file pointer">
                    <img :src="pro.img">
                    <p v-if="pro.fileType === 'video'" class="flex-center flex-align-items-center">
                      <i class="iconfont icon-bofang"></i>
                    </p>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column v-if="form.tab === '自主导入添加'" prop="averageInteractionRate" label="导入日期" width="100" />
            <el-table-column v-if="form.tab !== '搜索添加'" label="所属平台" width="100">
              <template #default="scope">
                <img :src="platformImg[scope.row.platform]" class="row-img">
              </template>
            </el-table-column>
            <el-table-column v-if="form.tab !== '搜索添加'" prop="location" label="国家" width="100" />
            <el-table-column v-if="form.tab === '收藏夹添加' || form.tab === '推广计划添加'" label="系统标签" width="220">
              <template #default="scope">
                <div v-if="scope.row.tags" class="row-tags flex">
                  <p v-for="(item, index) in scope.row.tags.slice(0, 2)" :key="index" class="row-tag font-12">{{ item }}
                  </p>
                  <el-popover v-if="scope.row.tags.length > 2" width="320" placement="bottom" trigger="hover">
                    <template #reference>
                      <div class="row-tag flex-center flex-align-items-center">
                        <i class="iconfont icon-gengduo"></i>
                      </div>
                    </template>
                    <div class="item-all-tags flex flex-wrap">
                      <p v-for="(tag, tagIndex) in scope.row.tags.slice(0, 3)" :key="tagIndex" class="item-all-tag">{{ tag
                      }}
                      </p>
                    </div>
                  </el-popover>
                </div>
                <p v-else>-</p>
              </template>
            </el-table-column>
            <el-table-column v-if="form.tab === '自主导入添加'" label="平台标签" width="220">
              <template #default="scope">
                <div v-if="scope.row.tags" class="row-tags flex">
                  <p v-for="(item, index) in scope.row.tags.slice(0, 2)" :key="index" class="row-tag font-12">{{ item }}
                  </p>
                  <el-popover v-if="scope.row.tags.length > 2" width="320" placement="bottom" trigger="hover">
                    <template #reference>
                      <div class="row-tag flex-center flex-align-items-center">
                        <i class="iconfont icon-gengduo"></i>
                      </div>
                    </template>
                    <div class="item-all-tags flex flex-wrap">
                      <p v-for="(tag, tagIndex) in scope.row.tags.slice(0, 3)" :key="tagIndex" class="item-all-tag">{{ tag
                      }}
                      </p>
                    </div>
                  </el-popover>
                </div>
                <p v-else>-</p>
              </template>
            </el-table-column>
            <el-table-column v-if="form.tab !== '搜索添加'" label="自定义标签" width="220">
              <template #default="scope">
                <div v-if="scope.row.tags" class="row-tags flex">
                  <p v-for="(item, index) in scope.row.tags.slice(0, 2)" :key="index" class="row-tag font-12">{{ item }}
                  </p>
                  <el-popover v-if="scope.row.tags.length > 2" width="320" placement="bottom" trigger="hover">
                    <template #reference>
                      <div class="row-tag flex-center flex-align-items-center">
                        <i class="iconfont icon-gengduo"></i>
                      </div>
                    </template>
                    <div class="item-all-tags flex flex-wrap">
                      <p v-for="(tag, tagIndex) in scope.row.tags.slice(0, 3)" :key="tagIndex" class="item-all-tag">{{ tag
                      }}
                      </p>
                    </div>
                  </el-popover>
                </div>
                <p v-else>-</p>
              </template>
            </el-table-column>
            <el-table-column v-if="form.tab === '收藏夹添加' || form.tab === '推广计划添加'" prop="averageInteractionRate"
              label="凡兔评分" width="100" />
            <el-table-column v-if="form.tab !== '搜索添加'" prop="fans" label="粉丝量" width="100">
              <template #default="scope">
                <p class="font-14">{{ numConvert(scope.row.fans) }}</p>
              </template>
            </el-table-column>
            <el-table-column v-if="form.tab !== '搜索添加'" prop="averageInteractionRate" label="平均观看量" width="100">
              <template #default="scope">
                <p class="font-14">{{ numConvert(scope.row.averageViews) }}</p>
              </template>
            </el-table-column>
            <el-table-column v-if="form.tab !== '搜索添加'" prop="averageInteractionRate" label="平均互动率" width="100" />
            <el-table-column v-if="form.tab === '收藏夹添加'" prop="averageInteractionRate" label="收藏日期" width="100" />
            <el-table-column v-if="form.tab === '自主导入添加'" prop="averageInteractionRate" label="本账号联系状态" width="100" />
            <el-table-column v-if="form.tab === '自主导入添加'" prop="averageInteractionRate" label="所有账号联系状态" width="100" />
            <el-table-column v-if="form.tab === '自主导入添加'" prop="averageInteractionRate" label="导入账号" width="100" />
            <el-table-column v-if="form.tab === '推广计划添加'" prop="averageInteractionRate" label="添加日期" width="100" />
          </el-table>
          <div v-if="form.tab === '搜索添加'" class="filter-table flex flex-align-items-center">
            <div class="switch-btns flex">
              <div class="switch-btn flex flex-align-items-center">
                <el-switch size="small" />
                <span class="font-14">计划外红人</span>
              </div>
              <div class="switch-btn flex flex-align-items-center">
                <el-switch size="small" />
                <span class="font-14">本账号未联系</span>
              </div>
              <div class="switch-btn flex flex-align-items-center">
                <el-switch size="small" />
                <span class="font-14">所有账号未联系</span>
              </div>
            </div>
            <div class="sort-btns flex">
              <el-popover placement="top" :width="80" trigger="hover">
                <template #reference>
                  <div class="sort-btn flex-center flex-align-items-center">
                    <i class="iconfont icon-mail"></i>
                    <span class="font-14">有邮箱</span>
                  </div>
                </template>
                <div class="save-record-explain font-12">
                  是否有邮箱
                </div>
              </el-popover>
              <el-dropdown :hide-on-click="false" trigger="click">
                <div class="sort-btn flex flex-align-items-center pointer">
                  <i class="item-title-right iconfont icon-paixu"></i>
                  <span class="font-14">{{ data.sortList.find(item => item.value === form.sort).name }}</span>
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item v-for="(item, index) in data.sortList" :key="index">
                      <span :class="{ 'el-dropdown-active': item.value === form.sort }">{{ item.name }}</span>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </div>

        <div class="pagination flex">
          <el-pagination :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next, total"
            :total="form.total" />
        </div>
      </div>
    </div>
  </div>

  <search-criteria-saved v-if="searchCriteriaSavedShow" @change="conditionChange"
    @close="searchCriteriaSavedChange"></search-criteria-saved>
</template>

<script setup>
import SearchCriteriaSaved from '@/views/home/components/searchCriteriaSaved.vue';
import CheckboxPopup from '@/views/home/components/checkboxPopup.vue';
import RadioRangePopup from '@/views/home/components/radioRangePopup.vue';
import ReleaseTimePopup from '@/views/home/components/releaseTimePopup.vue';
import RadioPopup from '@/views/staging/components/radioPopup.vue';
import CheckboxPopup1 from '@/views/staging/components/checkboxPopup.vue';
import data from '@/js/data.js';
import numConvert from '@/js/numConvert';
import api from '@/api/index.js';
import { defineEmits, ref, onMounted } from 'vue';

const emit = defineEmits(['change', 'close']);

const tabList = ["搜索添加", "收藏夹添加", "自主导入添加", "推广计划添加"];
const platformList = [
  {
    name: "YouTube",
    icon: require('../../../../../assets/icon-1.png')
  },
  {
    name: "TikTok",
    icon: require('../../../../../assets/icon-2.png')
  },
  {
    name: "Instagram",
    icon: require('../../../../../assets/icon-3.png')
  }
];
const fieldList = [
  {
    name: "关键词",
    placeholder: "请输入通用词或品牌词，如clothing, skirt, shein",
    icon: require('../../../../../assets/keyword.svg')
  },
  {
    name: "红人名",
    placeholder: "请输入红人名或者频道名",
    icon: require('../../../../../assets/name.svg')
  },
  {
    name: "主页链接",
    placeholder: "请输入红人的社交媒体主页链接",
    icon: require('../../../../../assets/link.svg')
  }
];
const platformImg = {
  1: require('../../../../../assets/icon-1.png'),
  2: require('../../../../../assets/icon-2.png'),
  3: require('../../../../../assets/icon-3.png')
};

const searchCriteriaSavedShow = ref(false);
const tableHeight = ref(0);
const form = ref({
  tab: "搜索添加",
  platformIndex: 0,
  collect: null,
  platform: -1,
  fieldIndex: 0,
  keyword: '',
  name: '',
  link: '',
  cates: [],
  areas: [],
  fans: -1,
  averageViews: -1,
  averageInteractionRate: -1,
  releaseTimeList: -1,
  followPerson: [],
  email: -1,
  sort: undefined,
  total: 100
});
const selectShow = ref({
  platformShow: false,
  catesShow: false,
  areasShow: false,
  fansShow: false,
  averageViewsShow: false,
  averageInteractionRateShow: false,
  releaseTimeListShow: false,
  followPersonShow: false,
  emailShow: false
});
const followPersonList = ref([
  {
    name: '谢谢',
    value: 1
  }
]);
const searchList = ref([
  {
    id: 1,
    platform: 1,
    name: 'SpawnPoiint',
    channel: 'SpawnPoiint',
    avatar: 'https://www.wotohub.com/static/img/koc_default_man.8132f247.svg',
    tags: ['时尚生活', '科技', '数码电器', '时尚服饰'],
    location: '英国',
    score: 2.5,
    fans: 815324,
    averageViews: 654132,
    averageInteractionRate: '5.45%',
    business: 1051,
    collect: false,
    openEmail: true,
    proList: [
      {
        fileType: 'video',
        img: 'https://img-cdn.wotokol.com/images/1/video/4736EED9B04FC2D6079FEC861A9932C5FC9BBDECF2467655034AAF38AB138E889553A0CBFD2BA62A36864E5DDC828BEDA33E1A8AFC9FED0255CEA027332A1ED5.jpg',
        url: 'https://www.youtube.com/watch?v=xGBTUoLBgMc'
      },
      {
        fileType: 'img',
        img: 'https://img-cdn.wotokol.com/images/1/video/4736EED9B04FC2D6079FEC861A9932C5FC9BBDECF2467655034AAF38AB138E889553A0CBFD2BA62A36864E5DDC828BEDA33E1A8AFC9FED0255CEA027332A1ED5.jpg',
        url: 'https://www.youtube.com/watch?v=xGBTUoLBgMc'
      },
      {
        fileType: 'img',
        img: 'https://img-cdn.wotokol.com/images/1/video/4736EED9B04FC2D6079FEC861A9932C5FC9BBDECF2467655034AAF38AB138E889553A0CBFD2BA62A36864E5DDC828BEDA33E1A8AFC9FED0255CEA027332A1ED5.jpg',
        url: 'https://www.youtube.com/watch?v=xGBTUoLBgMc'
      },
      {
        fileType: 'img',
        img: 'https://img-cdn.wotokol.com/images/1/video/4736EED9B04FC2D6079FEC861A9932C5FC9BBDECF2467655034AAF38AB138E889553A0CBFD2BA62A36864E5DDC828BEDA33E1A8AFC9FED0255CEA027332A1ED5.jpg',
        url: 'https://www.youtube.com/watch?v=xGBTUoLBgMc'
      }
    ]
  }
]);
const cateList = ref([]);
const countryList = ref([]);

const close = () => {
  emit('colse');
}
const tabChange = e => {
  if (form.value.tab !== e) {
    form.value.tab = e;
    calculateTableHeight();
  }
}
const platformChange = index => {
  if (form.value.platformIndex !== index) {
    form.value.platformIndex = index;
  }
}
const fieldChange = index => {
  if (form.value.fieldIndex !== index) {
    form.value.fieldIndex = index;
  }
}
const selectChange = (e, field) => {
  form.value[field] = e;
}
const selectShowChange = (field, value) => {
  selectShow.value[field] = value;
}
// 显示或隐藏保存的搜索条件框
const searchCriteriaSavedChange = () => {
  searchCriteriaSavedShow.value = !searchCriteriaSavedShow.value;
}
// 计算table高度
const calculateTableHeight = () => {
  let height = window.innerHeight;
  if (form.value.tab === '自主导入添加') {
    height = height - 240;
  } else {
    height = height - 310;
  }
  tableHeight.value = height;
}

const handleSelectionChange = e => {
  console.log(e);
}
// 获取红人分类
const queryCateList = () => {
  api.sensation.queryCateList().then(res => {
    cateList.value = res.map(item => {
      item.children = item.categories;
      return item;
    });
  });
}
// 获取国家列表
const queryCountryList = () => {
  api.sensation.queryCountryList().then(res => {
    countryList.value = res.filter(item => item.countries.length).map(item => {
      item.children = item.countries;
      return item;
    });
  });
}

onMounted(() => {
  queryCateList();
  queryCountryList();
  calculateTableHeight();
});
</script>

<style lang="less" scoped>
.popup {
  z-index: 888;

  .main {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    width: 1020px;
    height: 100%;
    background: #fff;
  }

  .main-content {
    padding: 24px 24px 0;
  }

  .tabs {
    p {
      width: 25%;
      height: 42px;
      border: 1px solid #e4e7ed;
      color: #303133;
      text-align: center;
      line-height: 40px;

      &:first-child {
        border-radius: 8px 0 0 8px;
      }

      &:last-child {
        border-radius: 0 8px 8px 0;
      }

      &.active {
        border-color: @main-color;
        color: @main-color;
      }
    }
  }

  .search {
    margin-top: 24px;

    .search-box {
      height: 44px;
      border-radius: 20px;

      .platform-list {
        width: 158px;
        height: 44px;
        background: #f8f8f8;
        border-radius: 10px;
        display: flex;
        margin-right: 8px;

        div {
          width: 54px;
          height: 44px;
          border-radius: 10px;

          &.active {
            background: rgba(255, 82, 119, .1);
            border: 1px solid @main-color;
          }

          img {
            width: 24px;
            height: 24px;
          }
        }
      }

      &::v-deep {
        .el-select .el-input {
          height: 40px;
        }
      }

      .search-field {
        width: 128px;
        height: 44px;
        border-radius: 10px;
        margin-right: 8px;

        &:hover {
          background: #f8f8f8;
        }

        p {
          color: #333;
          margin-right: 11px;
        }

        i {
          color: #9a9a9a;
        }
      }

      .line {
        width: 1px;
        height: 30px;
        background: #f2f2f2;
        margin-right: 16px;
      }

      .save-record-btn {
        margin-left: 16px;
        width: 42px;
        height: 42px;
        border-radius: 10px;
        background: #f8f8f8;

        &:hover {
          i {
            color: @main-color;
          }
        }

        i {
          font-size: 24px;
          color: #999;
        }
      }

      .search-btn {
        margin-left: 12px;
        width: 100px;
        height: 42px;
        background: linear-gradient(140deg, #a775ff, @main-color);
        border-radius: 12px;

        i {
          font-size: 20px;
          color: #fff;
          margin-right: 10px;
        }

        span {
          color: #fff;
        }
      }
    }
  }

  .condition {
    margin: 16px 0;

    .select-btns {
      .select-btn {
        min-width: 118px;
        height: 32px;
        border-radius: 6px;
        background: #fff;
        padding-left: 12px;
        padding-right: 8px;
        margin-right: 8px;
        border: 1px solid #f2f2f2;

        &.selected {
          background: #ffedf1;

          span,
          i {
            color: @main-color;
          }
        }

        &.active {
          background: #ffedf1;
          border: 1px solid @main-color;

          span,
          i {
            color: @main-color;
          }
        }

        span {
          color: #333;
        }

        i {
          color: #999;
          font-size: 12px;
        }
      }
    }

    .condition-btns {
      p {
        width: 64px;
        height: 32px;
        border-radius: 6px;
        color: #666;
        background: #f8f8f8;
        text-align: center;
        line-height: 32px;
        margin-right: 10px;

        &:last-child {
          background: #ffeef1;
          color: @main-color;
          margin-right: 0;

          &:hover {
            background: @main-color;
            color: #fff;
          }
        }
      }
    }
  }

  .row-user {
    width: 90px;
    height: 90px;
    position: relative;
    margin-right: 16px;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }

    p {
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 10;
      width: 100%;
      text-align: center;
      line-height: 45px;
      color: #fff;
    }
  }

  .row-info {
    width: 254px;
    height: 90px;
    margin-right: 24px;

    .row-name {
      margin-bottom: 4px;

      &:hover {
        p {
          color: @main-color;
        }
      }

      p {
        color: #333;
        max-width: 230px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      img {
        margin-left: 8px;
        width: 20px;
      }
    }

    .row-tags {
      .row-tag {
        margin: 0 8px 10px 0;
        line-height: 24px;
        background: hsla(0, 0%, 93%, .4);
        border-radius: 12px;
        border: 1px solid #dcdee0;
        font-size: 12px;
        padding: 0 8px;
        color: #606266;
      }

      .row-tag-more {
        width: 26px;
        height: 26px;
        background: hsla(0, 0%, 93%, .4);
        border-radius: 12px;
        border: 1px solid #dcdee0;

        i {
          color: #606266;
        }
      }
    }

    .row-location {
      i {
        color: #dcdee0;
        margin-right: 4px;
      }

      p {
        color: #666;
      }
    }
  }

  .row-data {
    div {
      margin-bottom: 4px;

      &:last-child {
        margin-bottom: 0;
      }

      p {
        color: #606266;
      }
    }
  }

  .row-files {
    .row-file {
      width: 146px;
      height: 88px;
      margin-right: 8px;
      position: relative;
      border-radius: 8px;
      overflow: hidden;

      &:hover {
        img {
          transform: scale(1.2);
        }

        p::after {
          background: @main-color;
          opacity: 1;
        }
      }

      img {
        width: 100%;
        height: 100%;
      }

      p {
        position: absolute;
        left: 56px;
        top: 28px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        overflow: hidden;
        z-index: 10;

        &::after {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: #000;
          opacity: 0.2;
        }

        i {
          position: relative;
          z-index: 20;
          color: #fff;
        }
      }
    }
  }

  .row-img {
    width: 20px;
    height: 20px;
  }

  .row-tags {
    .row-tag {
      height: 24px;
      padding: 0 8px;
      background: hsla(0, 0%, 93%, .4);
      border-radius: 12px;
      border: 1px solid #dcdee0;
      color: #666;
      line-height: 24px;
      margin-right: 8px;
    }
  }
}

.table {
  position: relative;

  .filter-table {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 50;
    height: 39px;
    width: 652px;
    background: #f9f9f9;
  }

  .switch-btns {
    .switch-btn {
      margin-right: 24px;

      &:last-child {
        margin-right: 0;
      }

      span {
        padding-left: 8px;
        white-space: nowrap;
      }
    }
  }

  .sort-btns {
    .sort-btn {
      min-width: 100px;
      height: 34px;

      &:hover {
        background: #f8f8f8;
      }

      i {
        font-size: 14px;
        color: #606266;
      }

      span {
        color: #606266;
        margin-left: 8px;
      }
    }
  }
}

.search-field-popup {
  padding: 10px 16px 8px;

  .search-field-item {
    width: 100px;
    height: 80px;
    border-radius: 10px;

    &:hover,
    &.active {
      background: #ffedf1;

      p {
        color: @main-color;
      }
    }

    img {
      width: 24px;
      height: 24px;
      margin-bottom: 4px;
    }

    p {
      color: #333;
    }
  }
}

.save-record-explain {
  text-align: center;
  line-height: 37px;
  color: #333;
}

.row-info-explain {
  padding: 10px;
}

.item-all-tags {
  width: auto;
  padding: 10px;

  .item-all-tag {
    margin: 0 8px 10px 0;
    line-height: 24px;
    background: hsla(0, 0%, 93%, .4);
    border-radius: 12px;
    border: 1px solid #dcdee0;
    font-size: 12px;
    padding: 0 8px;
    color: #606266;
    white-space: nowrap;
  }
}

.pagination {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #fff;
  z-index: 10;
  justify-content: end;
  padding: 12px 24px;
}
</style>
